import FunnelChart from "./FunnelChart";
import GridItem from "../common/GridItem";
import styles from "../index.module.less";
import { merchantMap } from "../store";
import { Dayjs } from "dayjs";
import { get_fontColor } from "../CustomBoard";
export const _toPercent = (new_num, new_total, old_num, old_total) => {
  new_num = +new_num;
  new_total = +new_total;
  old_num = +old_num;
  old_total = +old_total;
  if (new_num === 0 || new_total === 0 || old_num === 0 || old_total === 0)
    return "--";
  const new_percent: any = new_num / new_total;
  const old_percent: any = old_num / old_total;
  const result = +((new_percent / old_percent - 1) * 100).toFixed(2);
  if (result === 0) return "--";
  return result > 0 ? "+" + result + "%" : result + "%";
};
function toPercent(num, total) {
  if (+num === 0 || +total === 0) return "--";
  const result = Math.round((num / total) * 10000) / 100.0;
  if (result === 0) return "--";
  return result > 0 ? "+" + result + "%" : result + "%";
}
export default defineComponent({
  setup(props, { expose }) {
    const _self = reactive<any>(getCurrentInstance());
    const queryParams = reactive<any>({
      merchant_user_id: "",
      date: $dayjs(getTimeByZone(new Date())),
    });
    const formInline = reactive({
      yesterday_active_user_num: "",
      yesterday_register_user_num: "",
      today_active_user_num: "",
      today_register_user_num: "",
      yesterday_visit_user_num: "",
      today_visit_user_num: "",
      yesterday_order_user_num: "",
      today_order_user_num: "",
      yesterday_active_user_num_total: "",
      today_active_user_num_total: "",
      yesterday_pay_user_num: "",
      yesterday_pay_user_num_total: "",
      today_pay_user_num: "",
      today_pay_user_num_total: "",
      updated_at: "",
    });
    const fetchData = async () => {
      const res: any = await overviewApi.queryCovertBoard({
        merchant_user_id:
          queryParams.merchant_user_id === ""
            ? undefined
            : queryParams.merchant_user_id,
        date: queryParams.date.format("YYYY-MM-DD"),
      });

      if (res.code != 200) return message.error(res.message);
      initObjAttr(formInline, res.data, "target");
    };
    const initPage = async () => {
      await fetchData();
      _self.refs.funnel_chart.initPage();
    };
    expose({ initPage });
    return () => {
      const get_registerRate = _toPercent(
        formInline.today_active_user_num,
        formInline.today_register_user_num,
        formInline.yesterday_active_user_num,
        formInline.yesterday_register_user_num
      );
      const get_registerThan = toPercent(
        formInline.today_active_user_num,
        formInline.today_register_user_num
      );
      const get_accessRate = _toPercent(
        formInline.today_visit_user_num,
        formInline.today_active_user_num_total,
        formInline.yesterday_visit_user_num,
        formInline.yesterday_active_user_num_total
      );
      const get_accessThan = toPercent(
        formInline.today_visit_user_num,
        formInline.today_active_user_num_total
      );
      const get_buyRate = _toPercent(
        formInline.today_order_user_num,
        formInline.today_active_user_num_total,
        formInline.yesterday_order_user_num,
        formInline.yesterday_active_user_num_total
      );
      const get_buyThan = toPercent(
        formInline.today_order_user_num,
        formInline.today_active_user_num_total
      );
      const get_payRate = _toPercent(
        formInline.today_pay_user_num,
        formInline.today_pay_user_num_total,
        formInline.yesterday_pay_user_num,
        formInline.yesterday_pay_user_num_total
      );
      const get_payThan = toPercent(
        formInline.today_pay_user_num,
        formInline.today_pay_user_num_total
      );
      return (
        <div class={styles.transform_board}>
          <div class={styles.Flex_wrap}>
            <div class={styles.flex_item}>
              <s-title style="margin-bottom: 0px">{$t("overview13")}</s-title>
            </div>
            <div class={styles.search}>
              <div class={styles.flex_item}>
                <div class={styles.title}>{$t("table14")}</div>
                <div>
                  <a-select
                    v-model:value={queryParams.merchant_user_id}
                    onChange={(value) => {
                      initPage();
                    }}
                    style="width: 150px"
                    placeholder={$t("placeholder24")}
                    options={merchantMap}
                  ></a-select>
                </div>
              </div>
              <div class={styles.flex_item}>
                <div class={styles.title}>{$t("table73")}：</div>
                <div>
                  <s-date-picker
                    v-model={queryParams.date}
                    format={(value) => value.format("YYYY-MM-DD")}
                    onChange={function (date: Dayjs, dateString: string) {
                      queryParams.date = date;
                      initPage();
                    }}
                  />
                </div>
              </div>
            </div>
          </div>

          <div class={styles.Grid_Wrap}>
            <div class={styles.Grid_Box}>
              <GridItem
                record={{
                  title: $t("overview14"),
                  tips: $t("overview19"),
                  data: (
                    <>
                      <i class={get_fontColor(get_registerThan)}>
                        {get_registerThan}
                      </i>
                    </>
                  ),
                  compare: (
                    <>
                      <i>{$t("overview18") + ":\r\n"}</i>
                      <i class={get_fontColor(get_registerRate)}>
                        {get_registerRate}
                      </i>
                    </>
                  ),
                }}
              />
              <GridItem
                record={{
                  title: $t("overview15"),
                  tips: $t("overview20"),
                  data: (
                    <>
                      <i class={get_fontColor(get_accessThan)}>
                        {get_accessThan}
                      </i>
                    </>
                  ),
                  compare: (
                    <>
                      <i>{$t("overview18") + ":\r\n"}</i>
                      <i class={get_fontColor(get_accessRate)}>
                        {get_accessRate}
                      </i>
                    </>
                  ),
                }}
              />
              <GridItem
                record={{
                  title: $t("overview16"),
                  tips: $t("overview21"),
                  data: (
                    <>
                      <i class={get_fontColor(get_buyThan)}>{get_buyThan}</i>
                    </>
                  ),
                  compare: (
                    <>
                      <i>{$t("overview18") + ":\r\n"}</i>
                      <i class={get_fontColor(get_buyRate)}>{get_buyRate}</i>
                    </>
                  ),
                }}
              />
              <GridItem
                record={{
                  title: $t("overview17"),
                  tips: $t("overview22"),
                  data: (
                    <>
                      <i class={get_fontColor(get_payThan)}>{get_payThan}</i>
                    </>
                  ),
                  compare: (
                    <>
                      <i>{$t("overview18") + ":\r\n"}</i>
                      <i class={get_fontColor(get_payRate)}>{get_payRate}</i>
                    </>
                  ),
                }}
              />
            </div>
            <div class={styles.funnel}>
              <FunnelChart ref="funnel_chart" formInline={formInline} />
            </div>
          </div>
        </div>
      );
    };
  },
});
